<template>
  <el-row :gutter="20" class="home-container">
    <!-- 主内容区域 -->
    <el-col :span="24">
      <!-- Banner区域 -->
      <div class="banner">
        <h2>欢迎来到 Wave Blog</h2>
        <p>分享技术，记录生活</p>
      </div>
    </el-col>
    
    <!-- 最新文章区域 -->
    <el-col :span="24">
      <div class="recent-articles">
        <h3>最新文章</h3>
        
        <!-- 文章列表 - 使用栅格布局 -->
        <el-row :gutter="20" class="article-list" v-if="articles.length > 0">
          <el-col 
            v-for="article in articles" 
            :key="article.id"
            :xs="24"
            :sm="24"
            :md="12"
            :lg="8"
          >
            <div class="article-item">
              <router-link :to="'/article/' + article.id" class="article-link">
                <h4 class="article-title">{{ article.title }}</h4>
                <p class="article-excerpt">{{ getExcerpt(article.content) }}</p>
                <div class="article-meta">
                  <span class="publish-time">{{ formatDate(article.createTime) }}</span>
                  <span class="category">{{ article.category || '未分类' }}</span>
                </div>
              </router-link>
            </div>
          </el-col>
        </el-row>
        
        <div class="empty-state" v-else>
          <p>暂无文章</p>
        </div>
        
        <div class="more-link">
          <router-link to="/article">查看更多 →</router-link>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useArticleStore } from '../store/articleStore.js'

export default {
  name: 'Home',
  setup() {
    const articleStore = useArticleStore()
    const articles = ref([])

    // 获取文章列表
    const fetchArticles = async () => {
      try {
        const data = await articleStore.fetchArticleList()
        // 只显示最新的5篇文章
        articles.value = data.slice(0, 5)
      } catch (error) {
        console.error('获取文章失败:', error)
      }
    }

    // 截取文章摘要
    const getExcerpt = (content, length = 100) => {
      if (!content) return ''
      // 去除HTML标签
      const plainText = content.replace(/<[^>]*>/g, '')
      return plainText.length > length ? plainText.substring(0, length) + '...' : plainText
    }

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    }

    onMounted(() => {
      fetchArticles()
    })

    return {
      articles,
      getExcerpt,
      formatDate
    }
  }
}
</script>

<style scoped>
.home-container {
  width: 100%;
  padding: 0 15px;
}

.banner {
  text-align: center;
  padding: 60px 20px;
  margin-bottom: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
}

.banner h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 600;
}

/* 文章卡片样式 */
.article-item {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.article-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.article-title {
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: var(--text-primary);
  font-weight: 600;
}

.article-excerpt {
  flex: 1;
  color: var(--text-regular);
  margin-bottom: 15px;
  line-height: 1.6;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.recent-articles h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--text-primary);
  position: relative;
  padding-bottom: 10px;
}

.recent-articles h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: var(--primary-color);
}

.more-link {
  margin-top: 30px;
  text-align: center;
}

.more-link a {
  color: var(--primary-color);
  font-weight: 500;
  font-size: 1rem;
  display: inline-block;
}

.more-link a:hover {
  color: #66b1ff;
  text-decoration: none;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .home-container {
    padding: 0 10px;
  }
  
  .banner {
    padding: 40px 15px;
    margin-bottom: 30px;
  }
  
  .banner h2 {
    font-size: 2rem;
  }
  
  .article-item {
    padding: 15px;
  }
  
  .article-title {
    font-size: 1.15rem;
  }
  
  .recent-articles h3 {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .banner {
    padding: 30px 10px;
    margin-bottom: 20px;
  }
  
  .banner h2 {
    font-size: 1.75rem;
  }
  
  .article-item {
    padding: 12px;
  }
  
  .article-title {
    font-size: 1.1rem;
  }
  
  .article-excerpt {
    font-size: 0.9rem;
  }
}
.banner p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.recent-articles {
  margin-bottom: 40px;
}

.recent-articles h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #333;
  position: relative;
  padding-bottom: 10px;
}

.recent-articles h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: #667eea;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-item {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.article-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.article-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.article-title {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #333;
  transition: color 0.3s;
}

.article-link:hover .article-title {
  color: #667eea;
}

.article-excerpt {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.6;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #999;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  background-color: white;
  border-radius: 8px;
}

.more-link {
  text-align: center;
  margin-top: 30px;
}

.more-link a {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.3s;
}

.more-link a:hover {
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner {
    padding: 40px 20px;
    margin-bottom: 30px;
  }
  
  .banner h2 {
    font-size: 2rem;
  }
  
  .banner p {
    font-size: 1rem;
  }
  
  .recent-articles h3 {
    font-size: 1.5rem;
  }
  
  .article-title {
    font-size: 1.3rem;
  }
  
  .article-item {
    padding: 15px;
  }
  
  .article-meta {
    gap: 10px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .banner {
    padding: 30px 15px;
    margin-bottom: 20px;
    border-radius: 6px;
  }
  
  .banner h2 {
    font-size: 1.8rem;
  }
  
  .recent-articles {
    margin-bottom: 30px;
  }
  
  .recent-articles h3 {
    font-size: 1.3rem;
  }
  
  .article-title {
    font-size: 1.2rem;
  }
  
  .article-item {
    padding: 15px;
    border-radius: 6px;
  }
  
  .article-excerpt {
    font-size: 0.9rem;
  }
  
  .more-link {
    margin-top: 20px;
  }
  
  .more-link a {
    font-size: 1rem;
  }
}
</style>